<!-- 所有游记展示页面 -->
<template>
  <div class="travel-journal-page">
    <nav-bar :activeComponent="activeComponent"></nav-bar>
    <!-- 页面顶部横幅 -->
    <div class="journal-banner">
      <div class="banner-content">
        <h1>旅行游记</h1>
        <p>分享精彩旅途，发现更多风景</p>
        <div class="banner-search">
          <input type="text" placeholder="搜索目的地、主题或关键词..." v-model="searchKeyword" />
          <button @click="searchJournals"><i class="fas fa-search"></i></button>
        </div>
      </div>
    </div>

    <!-- 内容主体区域 -->
    <div class="journal-container">
      <!-- 左侧：游记列表和筛选 -->
      <div class="journal-main">
        <!-- 筛选选项 -->
        <div class="filter-options">
          <div class="filter-group">
            <span class="filter-label">分类:</span>
            <div class="filter-tags">
              <span
                  v-for="(category, index) in categories"
                  :key="index"
                  :class="{ active: selectedCategory === category.tagName }"
                  @click="setCategory(category.tagName)"
              >{{ category.tagName }}</span>
            </div>
          </div>

          <div class="filter-group">
            <span class="filter-label">排序:</span>
            <div class="filter-tags">
              <span
                  v-for="(option, index) in sortOptions"
                  :key="index"
                  :class="{ active: currentSort === option.value }"
                  @click="setSort(option.value)"
              >{{ option.name }}</span>
            </div>
          </div>
        </div>

        <!-- 游记列表 -->
        <!-- 游记列表部分 - 每页9条的设计 -->
        <div class="journal-grid">
          <div class="journal-card" v-for="(journal, index) in displayedJournals" :key="index" @click="viewJournal(journal.id)">
            <div class="journal-image">
              <img :src="journal.imagePath" :alt="journal.title" />
              <div class="tag-container">
                <div class="journal-category" v-for="(tag, index) in journal.tags" :key="index">
                  {{ tag }}
                </div>
              </div>
              
            </div>
            <div class="journal-info">
              <h3 class="journal-title">{{ journal.title }}</h3>
              <p class="journal-excerpt">{{ journal.easyText }}</p>
              <div class="journal-meta">
                <div class="author-info">
                  <img :src="journal.user?.avatar" :alt="journal.user?.userName" class="author-avatar" />
                  <span>{{ journal.user?.userName || '匿名' }}</span>
                </div>
                <div class="journal-stats">
                  <span><i class="fas fa-eye"></i> {{ journal.viewCount}}</span>
                  <span><i class="fas fa-heart"></i> {{ journal.likeCount }}</span>
                  <span><i class="fas fa-comment"></i> {{ journal.commentCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页控件 - 固定每页9条 -->
        <div class="pagination">
          <button class="page-btn" :disabled="currentPage === 1" @click="prevPage">
            <i class="fas fa-chevron-left"></i>
          </button>
          <span
              v-for="page in displayedPages"
              :key="page"
              :class="{ active: currentPage === page }"
              @click="goToPage(page)"
          >{{ page }}</span>
          <button class="page-btn" :disabled="currentPage === totalPages" @click="nextPage">
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
      </div>

      <!-- 右侧：推荐和热门 -->
      <div class="journal-sidebar">
        <!-- 发布游记按钮 -->
        <div class="publish-button">
          <button @click="publishJournal">
            <a href="/postLogue">
            <i class="fas fa-edit"></i> 发表我的游记
            </a>

          </button>
        </div>

        <!-- 编辑推荐 -->
        <div class="sidebar-section editor-picks">
          <h2><i class="fas fa-crown"></i> 编辑推荐</h2>
          <div class="recommended-journal" v-for="(journal, index) in editorPicks" :key="index" @click="viewJournal(journal.id)">
            <div class="recommended-image">
              <img :src="journal.imagePath" :alt="journal.title" />
            </div>
            <div class="recommended-info">
              <h4>{{ journal.title }}</h4>
              <p class="author-name">{{ journal.user?.userName||'匿名'}}</p>
              <div class="journal-stats small">
                <span><i class="fas fa-eye"></i> {{ journal.viewCount }}</span>
                <span><i class="fas fa-heart"></i> {{ journal.likeCount}}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 热门目的地 -->
        <div class="sidebar-section hot-destinations">
          <h2><i class="fas fa-fire"></i> 热门目的地游记</h2>
          <div class="destination-tag-cloud">
            <span
                v-for="(destination, index) in hotDestinations"
                :key="index"
                :style="{ fontSize: (destination.weight * 0.5 + 0.8) + 'rem' }"
                @click="searchDestination(destination.cityName)"
            >{{ destination.cityName }}</span>
          </div>
        </div>

        <!-- 热门标签 -->
        <div class="sidebar-section hot-tags">
          <h2><i class="fas fa-tags"></i> 热门标签</h2>
          <div class="tag-cloud">
            <span
                v-for="(tag, index) in popularTags"
                :key="index"
                @click="searchTag(tag.value)"
            >{{ tag.tagName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {getAllTravelogues,getTravelogueById ,getAllTags} from "@/api/travelogue.js";
import {getUserById} from "@/api/user.js";
import { updateHomeShow, updateDestinations, updateGuides, updateTravelogues } from "@/api/home.js";
export default {
  name: 'TravelJournalPage',
  components: {NavBar},
  data() {
    return {
      activeComponent: 'travelogue',
      // 搜索关键词
      searchKeyword: '',

      // 分类选项
      categories: [
        {
          tagId:999,
          tagName:'all'
        }
      ],
      selectedCategory: 'all',

      // 排序选项
      sortOptions: [
        { name: '最新发布', value: 'newest' },
        { name: '最多浏览', value: 'views' },
        { name: '最多点赞', value: 'likes' },
        { name: '最多评论', value: 'comments' }
      ],
      currentSort: 'newest',

      // 分页
      currentPage: 1,
      itemsPerPage: 9,
      totalItems: 48,

      // 游记数据
      allJournals: [
  
      ],

      // 编辑推荐
      editorPicks: [
      ],

      // 热门目的地
      hotDestinations: [
        { name: '北京', weight: 1.8 },
        { name: '上海', weight: 1.6 },
        { name: '杭州', weight: 1.5 },
        { name: '成都', weight: 1.8 },
        { name: '三亚', weight: 1.7 },
        { name: '丽江', weight: 1.6 },
        { name: '西藏', weight: 1.9 },
        { name: '厦门', weight: 1.4 },
        { name: '云南', weight: 1.7 },
        { name: '新疆', weight: 1.5 },
        { name: '青岛', weight: 1.3 },
        { name: '九寨沟', weight: 1.4 },
        { name: '张家界', weight: 1.5 },
        { name: '黄山', weight: 1.4 },
        { name: '桂林', weight: 1.3 }
      ],

      // 热门标签
      popularTags: []
    };
  },
  computed: {

    displayedJournals() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredJournals.slice(start, end);
    },
    // 根据筛选条件过滤游记
    filteredJournals() {
      let result = [...this.allJournals];

// 按分类筛选
if (this.selectedCategory !== 'all') {
  result = result.filter(journal =>
    journal.tags?.includes(this.selectedCategory)
  );
}


      // 按关键词搜索
   // 按关键词搜索
if (this.searchKeyword) {
  const keyword = this.searchKeyword.toLowerCase();
  result = result.filter(journal =>
    journal.title?.toLowerCase().includes(keyword) ||
    journal.easyText?.toLowerCase().includes(keyword) ||
    (Array.isArray(journal.tags) && journal.tags.some(tag => tag.toLowerCase().includes(keyword)))
  );
}


      // 排序
      result.sort((a, b) => {
        switch (this.currentSort) {
          case 'views':
            return b.viewCount - a.viewCount;
          case 'likes':
            return b.likeCount - a.likeCount;
          case 'comments':
            return b.commentCount - a.commentCount;
          case 'newest':
          default:
            return b.travelogueId - a.travelogueId;
        }
      });

      return result;
    },

    // 总页数
    totalPages() {
      return Math.ceil(this.filteredJournals.length / this.itemsPerPage);
    },

    // 显示的页码
    displayedPages() {
      const maxPages = 5; // 最多显示5个页码
      if (this.totalPages <= maxPages) {
        return Array.from({ length: this.totalPages }, (_, i) => i + 1);
      }

      let start = Math.max(this.currentPage - 2, 1);
      let end = start + maxPages - 1;

      if (end > this.totalPages) {
        end = this.totalPages;
        start = Math.max(end - maxPages + 1, 1);
      }

      return Array.from({ length: end - start + 1 }, (_, i) => start + i);
    }
  },
  mounted() {
    this.getAllTravelogue() ; 
    this. getEditTravelogue() ;
    this.getTags();
    this.getCity();
  },
  methods: {
    // 获取分类名称
    getCategoryName(categoryValue) {
      const category = this.categories.find(cat => cat.value === categoryValue);
      return category ? category.name : '';
    },

    // 设置分类筛选
    setCategory(category) {
      this.selectedCategory = category;
      this.currentPage = 1;
    },

    // 设置排序方式
    setSort(sort) {
      this.currentSort = sort;
    },

    // 搜索游记
    searchJournals() {
      // 执行搜索
      console.log('搜索关键词:', this.searchKeyword);
      this.currentPage = 1;
    },

    // 搜索目的地
    searchDestination(destination) {
      this.searchKeyword = destination;
      this.searchJournals();
    },

    // 搜索标签
    searchTag(tag) {
      this.searchKeyword = tag;
      this.searchJournals();
    },

    // 查看游记详情
    viewJournal(journalId) {
      console.log('查看游记ID:', journalId);
      // 跳转到游记详情页
      this.$router.push(`/travelBlogPage`);
    },

    // 发表游记
    publishJournal() {
      console.log('跳转到发表游记页面');
      // 跳转到发表页面
      // this.$router.push('/publish-journal');
    },

    // 分页方法
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },

    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },

    goToPage(page) {
      this.currentPage = page;
    },
   getAllTravelogue() {
    getAllTravelogues({ }).then((res) => {
      this.allJournals   = res.data;
      console.log(`output->allJournals`,this.allJournals)
  });
},  
    getEditTravelogue() {
  getAllTravelogues({ is_editor: 1 }).then((res) => {
    this.editorPicks  = res.data;

    });
   
},
getTags() {
  getAllTags().then((res) => {
    this.popularTags = res.data.sort((a, b) => b.hotness - a.hotness).slice(0, 10);
    this.categories.push(
  ...res.data.sort((a, b) => b.hotness - a.hotness).slice(0, 7)
);

  })
},
getCity(){
  updateDestinations(7).then((res) => {
  //   this.popularTags = res.data.sort((a, b) => b.hotness - a.hotness).slice(0, 10);
  //   this.categories.push(
  // ...res.data.sort((a, b) => b.hotness - a.hotness).slice(0, 7)
// );
 this.hotDestinations=res.data;
  })
}
},

};
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
/* 紧凑版游记卡片样式 */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 25px;
}

.journal-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease;
  cursor: pointer;
  height: 320px; /* 固定高度,使卡片更紧凑 */
  display: flex;
  flex-direction: column;
}

.journal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.journal-image {
  height: 160px; /* 减小了图片高度 */
  position: relative;
  overflow: hidden;
}

.journal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.journal-card:hover .journal-image img {
  transform: scale(1.05);
}

.tag-container {
  display: flex;
  flex-wrap: wrap; /* 使标签自动换行 */
}

.journal-category {
  margin: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 3px 10px;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 500;
}


.journal-info {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.journal-title {
  margin: 0 0 6px 0;
  font-size: 1rem;
  line-height: 1.3;
  color: #333;
  /* 限制标题为两行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.6em;
}

.journal-excerpt {
  color: #666;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 10px;
  flex-grow: 1;
  /* 限制摘要为两行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #eee;
  font-size: 0.75rem;
  margin-top: auto;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.journal-stats {
  display: flex;
  gap: 10px;
  color: #777;
}

.journal-stats i {
  margin-right: 3px;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 30px 0;
}

.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.pagination span:hover {
  background-color: #e0e0e0;
}

.pagination span.active {
  background-color: #17a2b8;
  color: white;
  box-shadow: 0 2px 5px rgba(23, 162, 184, 0.3);
}

.page-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .journal-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
  }

  .journal-card {
    height: 300px;
  }

  .journal-image {
    height: 140px;
  }
}

@media (max-width: 576px) {
  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .journal-card {
    height: 280px;
  }

  .journal-image {
    height: 120px;
  }

  .journal-title {
    font-size: 0.9rem;
  }

  .journal-excerpt {
    font-size: 0.8rem;
  }

  .journal-meta {
    font-size: 0.7rem;
  }

  .pagination span, .page-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

@media (max-width: 400px) {
  .journal-grid {
    grid-template-columns: 1fr;
  }

  .journal-card {
    height: auto;
    max-height: 320px;
  }
}

/* 页面顶部横幅 */
.journal-banner {
  height: 300px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('https://via.placeholder.com/1920x500?text=旅行游记') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}

.banner-content {
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
  z-index: 2;
}

.journal-banner h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.journal-banner p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.banner-search {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  background-color: white;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.banner-search input {
  flex: 1;
  border: none;
  padding: 15px 25px;
  font-size: 1rem;
  outline: none;
}

.banner-search button {
  background: linear-gradient(135deg, #1a9ccb 0%, #17a2b8 100%);
  border: none;
  color: white;
  padding: 0 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.banner-search button:hover {
  background: linear-gradient(135deg, #148cb6 0%, #0f8a9d 100%);
}

/* 内容容器 */
.journal-container {
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  gap: 30px;
}

/* 左侧主内容区 */
.journal-main {
  flex: 1;
}

/* 筛选选项 */
.filter-options {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filter-group {
  margin-bottom: 15px;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-label {
  font-weight: 500;
  color: #555;
  margin-right: 15px;
}

.filter-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-tags span {
  padding: 6px 15px;
  border-radius: 20px;
  background-color: #f0f0f0;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-tags span:hover {
  background-color: #e0e0e0;
}

.filter-tags span.active {
  background-color: #17a2b8;
  color: white;
}

/* 游记列表 */
.journal-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.journal-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.journal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.journal-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.journal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.journal-card:hover .journal-image img {
  transform: scale(1.05);
}



.journal-info {
  padding: 20px;
}

.journal-info h3 {
  margin: 0 0 10px 0;
  font-size: 1.15rem;
  line-height: 1.4;
  color: #333;
}

.journal-excerpt {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #eee;
  font-size: 0.85rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.journal-stats {
  display: flex;
  gap: 15px;
  color: #777;
}

.journal-stats.small {
  gap: 10px;
  font-size: 0.8rem;
}

.journal-stats i {
  margin-right: 5px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 40px;
}

.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination span:hover {
  background-color: #e0e0e0;
}

.pagination span.active {
  background-color: #17a2b8;
  color: white;
}

.page-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 右侧边栏 */
.journal-sidebar {
  width: 320px;
  flex-shrink: 0;
}

.publish-button {
  margin-bottom: 20px;
}

.publish-button button {
  width: 100%;
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 15px;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}

.publish-button button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.publish-button button i {
  margin-right: 8px;
}

.sidebar-section {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sidebar-section h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-section h2 i {
  color: #17a2b8;
}

.editor-picks h2 i {
  color: #FFD700;
}

.hot-destinations h2 i {
  color: #FF6B6B;
}

/* 编辑推荐 */
.recommended-journal {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recommended-journal:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.recommended-journal:hover {
  transform: translateY(-3px);
}

.recommended-image {
  width: 90px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.recommended-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommended-info {
  display: flex;
  flex-direction: column;
}

.recommended-info h4 {
  margin: 0 0 5px 0;
  font-size: 0.95rem;
  line-height: 1.3;
}

.author-name {
  font-size: 0.8rem;
  color: #777;
  margin-bottom: 3px;
}

/* 热门目的地云标签 */
.destination-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px;
}

.destination-tag-cloud span {
  padding: 6px 15px;
  background-color: #f0f8ff;
  border-radius: 20px;
  color: #17a2b8;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.destination-tag-cloud span:hover {
  background-color: #e5f4ff;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 热门标签 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px;
}

.tag-cloud span {
  padding: 6px 15px;
  background-color: #f5f5f5;
  border-radius: 20px;
  color: #555;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-cloud span:hover {
  background-color: #eaeaea;
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .journal-container {
    padding: 0 15px;
  }

  .journal-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .journal-container {
    flex-direction: column;
  }

  .journal-sidebar {
    width: 100%;
    order: -1;
    margin-bottom: 25px;
  }

  .sidebar-section {
    padding: 15px;
  }

  .recommended-journal {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 768px) {
  .journal-banner {
    height: 250px;
  }

  .journal-banner h1 {
    font-size: 2rem;
  }

  .journal-banner p {
    font-size: 1rem;
  }

  .banner-search input {
    padding: 12px 20px;
  }

  .journal-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }

  .journal-image {
    height: 180px;
  }

  .filter-tags span {
    padding: 5px 12px;
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .journal-banner {
    height: 220px;
  }

  .journal-list {
    grid-template-columns: 1fr;
  }

  .filter-options {
    padding: 15px;
  }

  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .journal-container {
    margin: 25px auto;
  }

  .filter-label {
    margin-bottom: 5px;
  }

  .pagination span, .page-btn {
    width: 35px;
    height: 35px;
  }
}
</style>